<template>
<Row  class="layout-content-body">
  <dtable :columns="columns" :dataAll="dataAll" :dataShow="dataShow" 
  :loading="loading" 
   add edit del op check 
   @refresh="getall()" @show="show" @add="add" @del="del" @edit="edit" 
   ></dtable>
  <Modal title="资源信息" v-model="editData" :loading="loading" :mask-closable="false" class="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
    <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
      <Form-item label="名称" prop="Name">
        <Input v-model="formItem.Name" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="路径" prop="Url">
        <Input v-model="formItem.Url" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="图标" prop="Logo">
        <Input v-model="formItem.Logo" placeholder="请输入" :icon="formItem.Logo"></Input>
      </Form-item>
      <Form-item label="排序" prop="Seq">
        <Input v-model.number="formItem.Seq" placeholder="请输入"></Input>
      </Form-item>
      <Form-item label="类别" prop="Type">
        <Radio-group v-model.number="formItem.Type">
          <Radio label="1">目录功能</Radio>
          <Radio label="0">普通功能</Radio>
        </Radio-group>
      </Form-item>
      <Form-item label="父目录" prop="Pid">
        <Select v-model="formItem.Pid" :disabled="isMenu">
            <Option v-for="item  in parentRes" :value="item.Id" :key="item.Id">{{item.Name}}</Option>
          </Select>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
        </Input>
      </Form-item>
    </Form>
  </Modal>
</Row>
</template>
<script>
import api from '../../api'
// import router from '../../router'
import {
  mapMutations,
  mapGetters,
  mapState
} from 'vuex'
import {
  inputString
} from '@/common/utils'
import dtable from '@/components/table/dtable.vue'
export default {
  data() {
    return {
      loading: false,
      columns: [{
          title: '名称',
          key: 'Name',
          sortable: true
        },
        {
          title: '说明',
          key: 'Remark',
          sortable: true,
        },
        {
          title: '创建者',
          key: 'Creater',
          sortable: true,
        },
      ],
      dataShow: true, //是否显示表格数据查看表单
      dataAll: [],
      spinShow: false,
      editData: false,
      addid: 0,
      formItem: {
        Name: '',
        Url: '',
        Logo: 'plus',
        Type: 0,
        Seq: 100,
        Pid: '0',
        Remark: ''
      },
      ruleValidate: {
        Name: [{
          required: true,
          message: '名称不能为空',
          trigger: 'blur'
        }],
        Url: [{
          required: true,
          message: '路径不能为空',
          trigger: 'blur'
        }, ],
        Logo: [{
          required: true,
          message: 'logo不能为空',
          trigger: 'change'
        }],

      },
      flowdata: {
        "nodes": [{
            "className": "start",
            "id": "node-0",
            "text": "start",
            "style": {
              "left": "145px",
              "top": "89px",
              "lineHeight": "98px"
            }
          },
          {
            "className": "end",
            "id": "node-1",
            "text": "end",
            "style": {
              "left": "265px",
              "top": "429px",
              "lineHeight": "48px"
            }
          }
        ],
        "edges": [{
          "source": "node-0",
          "target": "node-1",
          "anchor": "AutoDefault",
          "uuids": ["node-0BottomCenter", "node-1TopCenter"],
          "labelText": "yes"
        }]
      }
    }

  },
  components: {
    dtable,
  },
  computed: {
    ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg']),
    filiterTableDate() {
      let e = this.dataAll.slice()
      let keys = this.searchKey
      let filterData = function(element) {
        if (keys === "") {
          return true
        }
        for (let o in element) {
          if (String(element[o]).indexOf(keys) >= 0) {
            return true
          }
        }
        return false
      }
      let fdata = e.filter(filterData)
      this.total = fdata.length
      return fdata
    },
    curTableData() {
      let from = this.pageSize * (this.current - 1)
      let to = from + this.pageSize
      return this.filiterTableDate.slice(from, to)
    },
    //      父资源
    parentRes() {
      let pr = []
      pr.push({
        Id: '0',
        Name: "根目录"
      })
      for (let e in this.dataAll) {
        if (this.dataAll[e].Type === 1) {
          pr.push({
            Name: this.dataAll[e].Name,
            Id: this.dataAll[e].Id
          })
        }
      }
      // console.log(pr)
      return pr
    },
    isMenu() {
      if (Number(this.formItem.Type) === 1) {
        return false
      } else {
        return true
      }
    }
  },
  watch: {},
  methods: {
    getall() {
      this.loading = true
      this.$api.getFlow().then(res => {
        if (!res.error) {
          this.dataAll = res.Data
          this.total = (res.Data).length
        } else {
          this.$Message.error(res.message)
        }
      })
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    show(row) {
      this.showItem = row
      this.showData = true
    },
    edit(index) {
      // console.log(index)
      // this.addid = 0
      // this.formItem = index
      // this.editData = true
      // var req={
      //   ":id":index.Id
      // }
      this.$api.getFlowOne(index.Id).then(res => {
        console.log(res.Data)
        this.flowdata = res.Data
        this.flowdata.edit = true
        setTimeout(() => {
          this.$router.push({
            name: 'flowchat',
            params: {
              flowdata: this.flowdata
            }
          })
        }, 500);
      }, err => {
        this.$Message.error(res.message, 4)
      })
    },
    add() {
      // this.addid = 1
      // this.$refs['editForm'].resetFields()
      // this.editData = true
      this.flowdata.edit = false
      this.$router.push({
        name: 'flowchat',
        params: {
          flowdata: this.flowdata
        }
      })
    },
    asyncOK() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          if (this.addid === 0) {
            this.$api.updateResource(this.formItem).then(res => {
              if (!res.error) {
                this.getall()
                this.$Message.success(res.message)
              } else {
                this.$Message.error(res.message, 4)
              }
            }, err => {
              this.$Message.error(res.message, 4)
            })
          } else if (this.addid === 1) {
            this.$api.addResource(this.formItem).then(res => {
              if (!res.error) {
                this.getall()
                this.$Message.success(res.message)
              } else {
                this.$Message.error(res.message, 4)
              }
            }, err => {
              this.$Message.error(res.message, 4)
            })
          }
          setTimeout(() => {
            this.editData = false;
          }, 500);
        } else {
          this.$Message.error('表单验证失败!');
        }
      })
    },
    asyncCancel() {
      this.getall()
    },
    del(row) {
      console.log(row)
      this.$api.deleteFlow(row).then(res => {
        if (!res.error) {
          this.getall()
          this.$Message.success(res.message)
        } else {
          this.$Message.error(res.data.message, 4)
        }
      }, error => {
        this.$Message.error(res.message, 4)
      })
    }
  },
  mounted() {
    this.getall()
  }
}
</script>


